<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="net.groupme.controller.model.UserFormMessages"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- meta tags, link to css:  -->
	<%@ include file="./jsp-includes/mymetaheader.jsp" %>
	
	<!--  Ajax-Includes -->
    <script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRUserManager.js'></script>
    <script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRSearchManager.js'></script>
    <script type='text/javascript' src='<%= request.getContextPath()%>/dwr/engine.js'></script>
    <script type='text/javascript' src='<%= request.getContextPath()%>/dwr/util.js'></script>
    <script src="<%= request.getContextPath()%>/scriptaculous/prototype.js" type="text/javascript"></script>
	<script src="<%= request.getContextPath()%>/scriptaculous/scriptaculous.js" type="text/javascript"></script>

	<title>
		GroupMe! - The Social Semantic Web  
		<c:choose>
			<c:when test="${userManager.loggedIn}">
				[Account Management]	 			
	 		</c:when>
			<c:otherwise>
				[Registration]
			</c:otherwise>
		</c:choose>
	</title>
	<script type="text/javascript" language="javascript"><!--
	//<![CDATA[//>
//Registration:
function register() {
  dwr.util.getValues(person);
  DWRUserManager.registerUser(person, registrationFinished);
}

function registrationFinished(resultMessages){
	messages = resultMessages;
	if(!resultMessages.registrationSuccessFul){
		dwr.util.setValues(resultMessages);
	}else{
		var wholeRegistrationForm = document.getElementById("accountCreationForm");
		wholeRegistrationForm.innerHTML="<h4>Registration Successful</h4>" 
			+ "<p style=\"font-size: 0.8em; margin-bottom:1em; margin-top:1em;\">Your GroupMe! account has been created successfully. You can now login and start to build new groups, browse existing groups, ...</p>"
			+ "<p style=\"font-size: 0.8em; margin-bottom:1em;\">Account Details:</p>" 
			+ "<table style=\"font-size: 0.8em; margin-bottom:1em;\">"
				+ "<tr><td><strong>first name:</strong></td><td>" + person.firstName + "</td></tr>"
				+ "<tr><td><strong>last name:</strong></td><td>" + person.lastName + "</td></tr>"
				+ "<tr><td><strong>email:</strong></td><td>" + person.email + "</td></tr>"
				+ "<tr><td><strong>foaf document:</strong></td><td>" + person.foafDocumentURL + "</td></tr>"
				+ "<tr><td><strong>username:</strong></td><td>" + person.username + "</td></tr>"
			+ "</table>"
			+ "<h4>Login</h4>"
			+ "<form name='login' action='<%= VIEW_VOCABULARY.GROUPME_BASE_URL + VIEW_VOCABULARY.ACTION_LOGIN %>' method='post'> "
				+ "<table style=\"font-size: 0.8em; margin-top:1em;\">"
				+ "<tr><td>username: </td><td><input type='text' name='<%= VIEW_VOCABULARY.PARAMETER_USERNAME %>' value='"  + person.username + "'/></td></tr>" 		
				+ "<tr><td>password: </td><td><input type='password' name='<%= VIEW_VOCABULARY.PARAMETER_PASSWORD %>'/></td></tr>"
				+ "<tr><td colspan='2'><input type='submit' value='login'/></td></tr></table>";
	}
}

// change password:
function changeUserPassword(){
	dwr.util.getValues(person);
	DWRUserManager.updatePassword(person, changeUserPasswordFinished);	
}

function changeUserPasswordFinished(resultMessages){
	if (resultMessages == null) {
		alert('Your session has expired.');
		window.location.href = '<%= request.getContextPath()%>/<%=VIEW_VOCABULARY.ACTION_HOME%>';
		return;
	}
	if(!resultMessages.registrationSuccessFul){
		dwr.util.setValues(resultMessages);
	}else{
		var wholeRegistrationForm = document.getElementById("accountCreationForm");
		wholeRegistrationForm.innerHTML="<h4>Password changed successfully</h4>" 
			+ "<p style=\"font-size: 0.8em; margin-bottom:1em; margin-top:1em;\">You can now continue to build new groups, browse existing groups, ...</p>"
			+ "<p><a href='<%= VIEW_VOCABULARY.ACTION_HOME %>' title='GroupMe! Home'>Back to <i>home</i>...</a></p>";
	}	
}

//change user details:
function updatePersonalUserData(){
	dwr.util.getValues(person);
	DWRUserManager.updateUserDetails(person, updatePersonalUserDataFinished);
}

function updatePersonalUserDataFinished(resultMessages){
	if (resultMessages == null) {
		alert('Your session has expired.');
		window.location.href = '<%= request.getContextPath()%>/<%=VIEW_VOCABULARY.ACTION_HOME%>';
		return;
	}
	if(!resultMessages.registrationSuccessFul){
		dwr.util.setValues(resultMessages);
	}else{
		var wholeRegistrationForm = document.getElementById("accountCreationForm");
		wholeRegistrationForm.innerHTML="<h4>Modifications accepted</h4>" 
			+ "<p style=\"font-size: 0.8em; margin-bottom:1em; margin-top:1em;\">Your GroupMe! account has been modified successfully. You can now continue to build or browse groups!</p>"
			+ "<p style=\"font-size: 0.8em; margin-bottom:1em;\">Actual Account Details:</p>" 
			+ "<table style=\"font-size: 0.8em;\">"
				+ "<tr><td><strong>first name:</strong></td><td>" + person.firstName + "</td></tr>"
				+ "<tr><td><strong>last name:</strong></td><td>" + person.lastName + "</td></tr>"
				+ "<tr><td><strong>email:</strong></td><td>" + person.email + "</td></tr>"
				+ "<tr><td><strong>foaf document:</strong></td><td>" + person.foafDocumentURL + "</td></tr>"
				+ "<tr><td><strong>photo:</strong></td><td>" + person.photo + "</td></tr>"
			+ "</table>"
			+ "<p style=\"font-size: 0.8em; margin-top:1em;\"><a href='<%= VIEW_VOCABULARY.ACTION_HOME %>' title='GroupMe! Home'>Back to <i>home</i>...</a></p>";
	}
}

//init stuff:
function initUser() {
  DWRUserManager.getUserFormObject(setUser);
}
function initMessages() {
  DWRUserManager.getUserFormObject(setMessages);
}
var person;
var messages;
function setUser(aperson) {
  person = aperson;
  dwr.util.setValues(aperson);
}
function setMessages(emptyMessages) {
  messages = emptyMessages;
}

function init() {
  DWRUtil.useLoadingMessage();
  initUser();
  initMessages();
}

	//<!]]>
	//-->
	</script>
</head>
<body onload="init();">
	<!-- title image, logo:  -->
	<div id="groupme_header">
		<%@ include file="./jsp-includes/groupme_header.jsp" %>
	</div>
	
	<!-- Menu: -->
	<div id="menu">
		<%@ include file="./jsp-includes/groupme_menu.jsp" %>
	</div>
	<!-- content and sidebar -->
	<!-- Content: -->
	<div id="mycontent">
		
			<div class="ro_bw">
				<div class="lo_bw">
					<div class="ru_bw">
						<div class="lu_bw">
							<div id="user_groups">
								<div class="content_header" id="grouplist_header" style="padding-top: 2px">
									<small style="color: #006699;">
									<span id="register_header">
										<c:choose>
											<c:when test="${userManager.loggedIn}">
												Manage GroupMe! Account
	 										</c:when>
											<c:otherwise>
												Create GroupMe! Account
											</c:otherwise>
										</c:choose>
									</span> 
									</small>
								</div>
								<div class="generalContent" style="">
									<c:if test="${userManager.loggedIn}">
										<div id="personal-menu" style="font-size: 0.8em;">Menu: 
											 <a href="<%=VIEW_VOCABULARY.RESTful_USER_URI_PATTERN + userManager.getUser().getUserName() %>" title="Your profile page...">you</a>
											| <a href="./<%=VIEW_VOCABULARY.ACTION_HOME%>?<%=VIEW_VOCABULARY.PARAMETER_MYHOME_VIEW %>=<%=VIEW_VOCABULARY.VIEW_MYGROUPS %>" title="Groups you created...">your groups</a>
											| <a href="./<%=VIEW_VOCABULARY.ACTION_HOME%>?<%=VIEW_VOCABULARY.PARAMETER_MYHOME_VIEW %>=<%=VIEW_VOCABULARY.VIEW_SUBSCRIPTIONS %>" title="Groups you subscribed to...">your subscriptions</a>
											| <a href="./<%=VIEW_VOCABULARY.ACTION_HOME%>?<%=VIEW_VOCABULARY.PARAMETER_MYHOME_VIEW %>=<%=VIEW_VOCABULARY.VIEW_DASHBOARD %>" title="View what happened with your stuff...">your dashboard</a>
											| <a href="./<%=VIEW_VOCABULARY.ACTION_HOME%>?<%=VIEW_VOCABULARY.PARAMETER_MYHOME_VIEW %>=<%=VIEW_VOCABULARY.VIEW_CREATE_NEW_GROUP %>" title="Create a new group...">create a new group</a>
											| <a href="<%= VIEW_VOCABULARY.ACTION_MODIFY_ACCOUNT %>" title="Modify your GroupMe! account...">account settings</a> 
										</div>
									</c:if>
									<div id="accountCreationForm" style="">
										<p id="<%= UserFormMessages.OVERALL_MESSAGE  %>" style="margin-bottom:1em;"></p>
										<h4>Enter Account Details</h4>
										<p style="font-size: 0.8em; margin-bottom:1em; margin-top:1em;"><strong>1. Personal Information:</strong></p>
							    		<table style="font-size: 0.8em;">
											<tr>
							           			<td>first name:</td>
							           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_FIRST_NAME %>"/> </td>
							           			<td><span class="error" id="<%= UserFormMessages.FIRSTNAME_MESSAGE %>"></span></td>
							        		</tr>
							        		<tr>
							           			<td>last name:</td>
							           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_LAST_NAME %>"/> </td>
							           			<td><span class="error" id="<%= UserFormMessages.LASTNAME_MESSAGE %>"></span></td>
							        		</tr>
							        		<tr>
							           			<td>email:</td>
							           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_EMAIL %>" /> </td>
							           			<td><span class="error" id="<%= UserFormMessages.EMAIL_MESSAGE %>"></span></td>
							        		</tr>
							        		<tr>
							           			<td>foaf:</td>
							           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_FOAF %>" /> </td>
							           			<td><span class="error" id="<%= UserFormMessages.FOAF_MESSAGE %>">
							           				<span style="color: gray;"> optional: If you have a <a href="http://foaf-project.org" title="Friend-Of-A-Friend">FOAF</a> description then enter its URL here.</span> 
							           			</span></td>
							        		</tr>
							        		<tr>
							           			<td>photo:</td>
							           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_PHOTO %>" /> </td>
							           			<td><span class="error" id="<%= UserFormMessages.PHOTO_MESSAGE %>">
							           				<span style="color: gray;"> optional: If you want to equip your GroupMe! account with a photo of you then enter its URL here.</span>
							           			</span></td>
							        		</tr>
							        	<c:if test="${userManager.loggedIn}">
							        		<tr>
							           			<td></td>
							           			<td>
							               			<input type="submit" value="back" onclick="javascript:location.href='<%= VIEW_VOCABULARY.ACTION_HOME %>'" />
							               			<input type="submit" value="update" onclick="updatePersonalUserData()" />
							           			</td>
							           			<td></td>
							        		</tr>
							        	</c:if>
							        	</table>
								<c:choose>
									<c:when test="${!userManager.loggedIn}">
										<p style="font-size: 0.8em; margin-bottom:1em; margin-top:1em;"><strong>2. Username and Password:</strong></p>        		
										<table style="font-size: 0.8em;">
							        		<tr>
							           			<td>username:</td>
							           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_USERNAME %>"/> </td>
							           			<td><span class="error" id="<%= UserFormMessages.USERNAME_MESSAGE %>"></span></td>
							        		</tr>
							        		<tr>
							           			<td>password:</td>
							           			<td><input type="password" id="<%= VIEW_VOCABULARY.PARAMETER_PASSWORD %>" /> </td>
							           			<td><span class="error" id="<%= UserFormMessages.PASSWORD_MESSAGE %>"></span></td>
							        		</tr>
							        		<tr>
							           			<td>validate password:</td>
							           			<td><input type="password" id="<%= VIEW_VOCABULARY.PARAMETER_RE_TYPED_PASSWORD %>" /> </td>
							           			<td/>
							        		</tr>
							        		<tr>
							           			<td></td>
							           			<td>
							               			<input type="submit" value="register" onclick="register()" />
							           			</td>
							           			<td></td>
							        		</tr>
							    		</table>
							   		</c:when>
							   		
									<c:otherwise>
							    		<p style="font-size: 0.8em; margin-bottom:1em; margin-top:1em;"><strong>2. Change Password:</strong></p>        		
										<table style="font-size: 0.8em;">
							        		<tr>
							           			<td>password:</td>
							           			<td><input type="password" id="<%= VIEW_VOCABULARY.PARAMETER_PASSWORD %>" /> </td>
							           			<td><span class="error" id="<%= UserFormMessages.PASSWORD_MESSAGE %>"></span></td>
							        		</tr>
							        		<tr>
							           			<td>validate password:</td>
							           			<td><input type="password" id="<%= VIEW_VOCABULARY.PARAMETER_RE_TYPED_PASSWORD %>" /> </td>
							           			<td/>
							        		</tr>
							        		<tr>
							        			<td></td>
							           			<td>
							           				<input type="submit" value="back" onclick="javascript:location.href='<%= VIEW_VOCABULARY.ACTION_HOME %>'" />
							               			<input type="submit" value="change password" onclick="changeUserPassword()" />
							           			</td>
							           			<td></td>
							        		</tr>
							    		</table>
									</c:otherwise>
								</c:choose>
							    		
								</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		
	</div>
	
	<div id="footer">
		<%@ include file="./jsp-includes/footer.jsp" %>
	</div>
</body>
</html>